<template>
	<view class="oneRiver_tree">
		<!-- <wft-tree :defaultProps="{ label: 'title', id: 'id', children: 'children' }" :data="treeData" :divider="false" :edit="false" :unfold="true" @node-click="nodeClick">
			<template v-slot="{ item }">
				<view class="tree-slot">
					<view class="edit" @tap="edit(item)">修改</view>
					<view class="del" @tap="del(item)">删除</view>
				</view>
			</template>
		</wft-tree> -->

		<luyj-tree v-slot:default="{ item }" :max="max" :trees="tree">
			<!-- 内容插槽 -->
			<view>
				<view class="content-item">
					<view class="word">{{ item.title }}</view>
				</view>
			</view>
		</luyj-tree>

		<u-popup :show="riverShow" mode="bottom" :round="10" @close="riverClose" @open="riverOpen">
			<u-collapse @change="change" @close="close" @open="open">
				<u-collapse-item title="查看地图" name="Numerous tools">
					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
				</u-collapse-item>
			</u-collapse>
			<view class="popup_river">
				<view>
					<view>河道名称</view>
					<view>22222</view>
				</view>
				<view>
					<view>河流长度(km)</view>
					<view>22222</view>
				</view>
				<view>
					<view>流域面积(km²)</view>
					<view>22222</view>
				</view>
				<view>
					<view>起点位置</view>
					<view>22222</view>
				</view>
				<view>
					<view>终点位置</view>
					<view>22222</view>
				</view>
				<view>
					<view>行政区域</view>
					<view>22222</view>
				</view>
				<view>
					<view>河流等级</view>
					<view>22222</view>
				</view>
				<view>
					<view>上级河流</view>
					<view>22222</view>
				</view>
				<view>
					<view>河长职务</view>
					<view>22222</view>
				</view>
				<view>
					<view>联系电话</view>
					<view>22222</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { getRvTree } from '@/api/mappages/lakes/lakes.js';
export default {
	data() {
		return {
			riverShow: false,
			tree: [],
			max: 5
		};
	},
	onLoad() {
		this.ok();
	},
	methods: {
		async ok() {
			let arr = await getRvTree();
			this.tree.push(...arr.result);
			console.log(this.tree, '222');
		}
	}
};
</script>

<style scoped>
.u-cell__title-text {
	color: #ff7f2f !important;
}
.oneRiver_tree {
	padding: 20rpx;
	width: 100%;
	background-color: #fff;
}
.popup_river {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
}
.popup_river view {
	display: flex;
	width: 100%;
}
.popup_river view view {
	margin: 5px 0;
}
.popup_river view view:nth-child(1) {
	width: 30%;
	font-weight: 700;
}
.popup_river view view:nth-child(2) {
	width: 70%;
	color: #8e8e8e;
}
</style>
